// 圆角
@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	border-radius: $radius;
}
// 文字溢出
@mixin text-ellipsis () {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
//多行文本溢出省略显示
@mixin text-ellipsisMore ($num:3) {
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: $num;
	-webkit-box-orient: vertical;
}
// Retina 背景图片
//使用方法
// .bg-image {
//    @include imgRetina(images/waterlily, jpg, 200px, 200px, no-repeat, center);
//    height: 200px;
//    width: 200px;
// }
@mixin imgRetina($image, $extension, $width, $height, $position: center, $repeat: no-repeat) {
	background: url($image + '.' + $extension) $repeat $position;
	@media 
	screen and (-webkit-min-device-pixel-ratio: 2),
	screen and (   min--moz-device-pixel-ratio: 2),
	screen and (   -moz-min-device-pixel-ratio: 2),
	screen and (     -o-min-device-pixel-ratio: 2/1),
	screen and (        min-device-pixel-ratio: 2),
	screen and (             min-resolution: 192dpi), 
	screen and (             min-resolution: 2dppx) {    
			background: url($image + '@2x' + '.' + $extension) $repeat $position;
			background-size: $width $height;
	}
}
//引用例子：@include clearfix();
@mixin clearfix() {
	&:before,
	&:after {
			content: "";
			display: table;
	}
	&:after {
			clear: both;
	}
}
//正三角的通用属性
%triangleBase {
	_font-size: 0;
	_line-height: 0;
	_overflow: hidden;
	width: 0;
	height: 0;

}

//regulaTriangle:正三角(dashed默认透明)
//例子：@include regulaTriangle(top,red);
@mixin regulaTriangle($derection:bottom, $color: #000, $width: 20px) {
	@extend %triangleBase;
	border-width: $width;
	//向右
	@if $derection==right {
			border-style: dashed dashed dashed solid;
			border-color: transparent transparent transparent $color;
	}
	//向左
	@if $derection==left {
			border-style: dashed solid dashed dashed;
			border-color: transparent $color transparent transparent;
	}
	//向上
	@if $derection==top {
			border-style: dashed dashed solid dashed;
			border-color: transparent transparent $color transparent;
	}
	//向下
	@if $derection==bottom {
			border-style: solid dashed dashed dashed;
			border-color: $color transparent transparent transparent;
	}
}

//-----------------------------------直角三角形-----------------------------------------
//right-angledTriangle:直角三角形
//例子：@include right-angledTriangle(1,red);
@mixin right-angledTriangle ($derection:1, $color:#000, $width: 20px, $opacity:transparent, $border:dashed) {
	@extend %triangleBase;
	border-width: $width;
	//向右
	@if $derection==1 {
			border-style: $border dashed dashed $border;
			border-color: $color $opacity $opacity $color;
	}
	//向右
	@if $derection==2 {
			border-style: $border $border dashed dashed;
			border-color: $color $color $opacity $opacity;
	}
	//向右
	@if $derection==3 {
			border-style: dashed $border $border dashed;
			border-color: $opacity $color $color $opacity;
	}
	//向右
	@if $derection==4 {
			border-style: dashed dashed $border $border;
			border-color: $opacity $opacity $color $color;
	}
}
//boxshadow:边框阴影
	//例子：@include boxshadow(24,100%);
@mixin boxshadow($x: 3px, $y: 3px, $shadowcolor: #cccccc) {
	-moz-box-shadow: $x $y 4px $shadowcolor; // FF3.5+ 
	-webkit-box-shadow: $x $y 4px $shadowcolor; // Saf3.0+, Chrome 
	box-shadow: $x $y 4px $shadowcolor; // Opera 10.5, IE 9.0 
	filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$shadowcolor}');
	/* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$shadowcolor}')";
	/* IE8 */
}   
// 居中
@mixin center {
	display: flex;
	justify-content: center;
	align-items: center;
}

//----------------------边框1px------------------
$gray: #bfbece;
/* 实现移动端 1px , 根据不同 dpr 去缩放 */
@mixin border-1px($color) {
	position: relative;
	@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
			&::after {
					transform: scaleY(0.7);
					content: '';
					width: 100%;
					border-bottom: 1px solid $color;
					height: 1px;
					position: absolute;
					bottom: 0;
			}
	}
	@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
			&::after {
					transform: scaleY(0.5);
					content: '';
					width: 100%;
					border-bottom: 1px solid $color;
					height: 1px;
					position: absolute;
					bottom: 0;
			}
	}
}
@mixin border ($direction, $color:#e6e6e6,$opacity:1) {
	content: '';
	position: absolute;
	@if $direction == 'left' {
			border-left: 1px solid $color;
			top: 0;
			left: 0;
			height: 100%;
			transform-origin: 0 0;
			opacity: $opacity;
	} @else if $direction == 'bottom' {
			width: 100%;
			border-bottom: 1px solid $color;
			left: 0;
			bottom: 0;
			transform-origin: 0 bottom;
			opacity: $opacity;
	} @else if $direction == 'top' {
			width: 100%;
			border-bottom: 1px solid $color;
			left: 0;
			top: 0;
			transform-origin: 0 bottom;
			opacity: $opacity;
	}@else if $direction == 'right' {
			width: 100%;
			border-right: 1px solid $color;
			left: 0;
			top: 0;
			transform-origin: 0 0;
			opacity: $opacity;
	}
	
	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
			@if $direction == 'left' {
					height: 200%;
			} @else {
					width: 200%;
			}
			transform: scale(.5);
			@if $direction == 'right' {
					height: 200%;
			} @else {
					width: 200%;
			}
	}
	@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
			@if $direction == 'left' {
					height: 300%;
			} @else {
					width: 300%;
			}
			@if $direction == 'right' {
					height: 300%;
			} @else {
					width: 300%;
			}
			transform: scale(.33);
	}
}

// 弹性布局
